<script setup>
	import { ref, onMounted, nextTick } from 'vue';
	import Hammer from 'hammerjs';
	import { navigateTo } from '@/utils/index.js';
	import { getBankList } from '@/api/portfolio';

	const list = ref([]);

	const stack = ref();

	const swipeLift = () => {
		const first = list.value.shift();
		list.value.push(first);
	};

	const swipeRight = () => {
		const last = list.value.pop();
		list.value.unshift(last);
	};

	const createTouch = () => {
		// 创建Hammer实例并添加滑动侦听器
		const manager = new Hammer.Manager(stack.value.$el);

		const Swipe = new Hammer.Swipe();
		manager.add(Swipe);

		manager.on('swipeleft', (e) => {
			swipeLift();
		});

		manager.on('swiperight', (e) => {
			console.log('滑动e', e);
			swipeRight();
		});
	};

	const colors = ['#bebc8b', '#d3eae4', '#b8cef6', '#eec0b0', '#e1ead7'];

	const getBankData = () => {
		getBankList().then((res) => {
			console.log(res);
			list.value = res.rows.map((item, index) => {
				return {
					...item,
					color: colors[index],
				};
			});

			setInterval(() => {
				swipeLift();
			}, 3000);

			// let other = res.rows.map((item, index) => {
			// 	return {
			// 		...item,
			// 		color: '#ff00ff',
			// 	};
			// });

			// let other1 = res.rows.map((item, index) => {
			// 	return {
			// 		...item,
			// 		color: '#1cdfcc',
			// 	};
			// });
			// let other2 = res.rows.map((item, index) => {
			// 	return {
			// 		...item,
			// 		color: '#2f0333',
			// 	};
			// });
			// list.value = [...list.value, ...other]
			// list.value = [...list.value, ...other1]
			// list.value = [...list.value, ...other2]
		});
	};
	const skipDetail = (id) => {
		navigateTo('detail?id=' + id);
	};

	onMounted(() => {
		nextTick(() => {
			createTouch();
			getBankData();
		});
	});
</script>
<template>
	<view class="card-stack" ref="stack">
		<view
			class="card-layer"
			:class="{ 'card-front': list.length === 1, 'card-middle': [2, 3].includes(list.length), 'card-all': [4, 5].includes(list.length) }">
			<view class="card" v-for="(item, index) in list" :key="item.id" :style="{ 'background-color': item.color }" @click="skipDetail(item.dailyId)">
				<image :src="item.dailyCoverUrl" />
				<view class="title">每日推荐</view>
				<view class="info">
					{{ item.dailyDesc }}
				</view>
			</view>
			<!-- <view class="card front">卡片1 - 最前面</view>
			<view class=" card middle-left">卡片2 - 中间层1</view>
			<view class="card middle-right">卡片3 - 中间层2</view>
			<view class="card back-left">卡片4 - 后面层1</view>
			<view class="card back-right">卡片5 - 后面层2</view> -->
		</view>
	</view>
</template>
<style scoped lang="scss">
	.card-stack {
		width: 100%;
		height: 100%;
		position: relative;
		perspective: 500px;
	}

	.card-layer {
		width: 100%;
		height: 100%;
		position: relative;
		transform-style: preserve-3d;
		transition: all 0.25s;
	}

	.card {
		width: 460rpx;
		height: 360rpx;
		position: absolute;
		top: 0;
		bottom: 0;
		transition: transform 0.5s;
		margin: auto;
		border-radius: 20rpx;
		color: #000000;
		line-height: 200rpx;
		transition: all 0.5s;
		display: flex;
		flex-direction: column;

		image {
			width: 100%;
			height: 210rpx;
		}

		.title {
			color: #535252;
			font-family: 'PINGFANG-HEAVY';
			font-size: 24rpx;
			font-weight: bold;
			line-height: 34rpx;
			padding: 20rpx 20rpx 10rpx;
		}

		.info {
			color: #3c3e3f;
			font-family: 'PINGFANG-MEDIUM';
			font-size: 20rpx;
			font-weight: 400;
			line-height: 38rpx;
			padding: 10rpx 20rpx;
			overflow: hidden;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		// &.front {
		// 	left: 0;
		// 	right: 0;
		// 	background-color: #b8cef6;
		// 	z-index: 3;
		// }

		// &.middle-left {
		// 	left: 10rpx;
		// 	background-color: #d3eae4;
		// 	z-index: 2;
		// 	transform: translateZ(-50rpx);
		// }

		// &.middle-right {
		// 	right: 10rpx;
		// 	background-color: #eec0b0;
		// 	z-index: 2;
		// 	transform: translateZ(-50rpx);
		// }

		// &.back-left {
		// 	left: -146rpx;
		// 	background-color: #bebc8b;
		// 	z-index: 1;
		// 	transform: translateZ(-100rpx);
		// }

		// &.back-right {
		// 	right: -146rpx;
		// 	background-color: #e1ead7;
		// 	z-index: 1;
		// 	transform: translateZ(-100rpx);
		// }
	}

	.card-front {
		.card {
			width: 100% !important;
			left: 0;
			right: 0;
			// background-color: #b8cef6;
			z-index: 3;
		}
	}

	.card-middle {
		.card {
			&:nth-of-type(1) {
				left: -146rpx;
				// background-color: #bebc8b;
				z-index: 1;
				transform: translateZ(-200rpx);
			}

			&:nth-of-type(2) {
				right: 0;
				// background-color: #b8cef6;
				z-index: 3;
			}
		}
	}

	.card-all {
		.card {
			&:nth-of-type(1) {
				left: -146rpx;
				// background-color: #bebc8b;
				z-index: 1;
				transform: translateZ(-200rpx);
			}

			&:nth-of-type(2) {
				left: -5rpx;
				// background-color: #d3eae4;
				z-index: 2;
				transform: translateZ(-100rpx);
			}

			&:nth-of-type(3) {
				left: 0;
				right: 0;
				// background-color: #b8cef6;
				z-index: 3;
			}

			&:nth-of-type(4) {
				right: -5rpx;
				// background-color: #eec0b0;
				z-index: 2;
				transform: translateZ(-100rpx);
			}

			&:nth-of-type(5) {
				right: -146rpx;
				// background-color: #e1ead7;
				z-index: 1;
				transform: translateZ(-200rpx);
			}
		}
	}
</style>
